<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.css"/>
		<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="css/demo.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<style type="text/css">
			a{
				text-decoration: none!important;
			}
			#minppts{
				width: 100%;
				height: 31px;
				color: #e2e1e4;
				background-color: white;
			}
			
			#header{
				background-color: #007aff;
			}
			#header button{
				margin-top: -5px;
			}
			#header div span{
    			font-size: 15px;
    			line-height: 25px;
    			color: #e2e1e4;
    		}
    		
    		.mui-search:before{
    			font-size: 15px!important;
    			line-height: 20px;
    			color: #e2e1e4;
            } 
    		.title {
				margin: 15px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			.muiicon{
				font-size: 11px;
				color: #FF0000;
			}
			.lisize p{
				font-size: 11px;
				margin-top: 5px;
				
			}
			.lisize a::after{
				font-size: 25px;
			}
			.lisize img{
				width: 65px;
				height: 65px;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<button id="showUserPicker" type="button" class="mui-btn mui-btn-blue mui-col-xs-3">
				<span id="showUsertxt">
					分类
				</span>
				<span class="iconfont icon-ea"></span>
				
			</button>
		<div class="mui-input-row mui-col-xs-8 mui-search mui-inline">
		    <input type="search" class="mui-input-clear mui-input-speech" id="minppts" placeholder="商品名/编号">
		</div>
		</header>
		<div class="mui-content">
		<div class="title">
			电子
		</div>
		<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media  lisize">
					<a href="#" class="mui-navigate-right" id="details">
						<img class=" mui-pull-left" src="images/diannao.png">
						<div class="mui-media-body">
							<h6>电脑</h6>
							<p class="mui-ellipsis "><span class="mui-icon iconfont icon-jine muiicon">6888</span></p>
							<p class="mui-ellipsis">库存：22</p>
						</div>
					</a>
				</li>
		</ul>
		<div class="title">
			数码
		</div>
		<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media  lisize">
					<a href="#" class="mui-navigate-right detailss">
						<img class=" mui-pull-left" src="images/xiangji.png">
						<div class="mui-media-body">
							<h6>相机</h6>
							<p class="mui-ellipsis "><span class="mui-icon iconfont icon-jine muiicon">6888</span></p>
							<p class="mui-ellipsis">库存：22</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media  lisize">
					<a href="#" class="mui-navigate-right detailss">
						<img class=" mui-pull-left" src="images/dayinji.png">
						<div class="mui-media-body">
							<h6>打印机</h6>
							<p class="mui-ellipsis "><span class="mui-icon iconfont icon-jine muiicon">6888</span></p>
							<p class="mui-ellipsis">库存：22</p>
						</div>
					</a>
				</li>
		</ul>
		<div class="title">
			电子
		</div>
		<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media  lisize">
					<a href="#" class="mui-navigate-right detailss">
						<img class=" mui-pull-left" src="images/diannao.png">
						<div class="mui-media-body">
							<h6> 电脑</h6>
							<p class="mui-ellipsis"><span class="mui-icon iconfont icon-jine muiicon">6888</span></p>
							<p class="mui-ellipsis">库存：22</p>
						</div>
					</a>
				</li>
		</ul>
		<div class="title">
			数码
		</div>
		<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media  lisize">
					<a href="#" class="mui-navigate-right detailss">
						<img class=" mui-pull-left" src="images/xiangji.png">
						<div class="mui-media-body">
							<h6>相机</h6>
							<p class="mui-ellipsis "><span class="mui-icon iconfont icon-jine muiicon">6888</span></p>
							<p class="mui-ellipsis">库存：22</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media  lisize">
					<a href="#" class="mui-navigate-right detailss">
						<img class=" mui-pull-left" src="images/dayinji.png">
						<div class="mui-media-body">
							<h6>打印机</h6>
							<p class="mui-ellipsis "><span class="mui-icon iconfont icon-jine muiicon">6888</span></p>
							<p class="mui-ellipsis">库存：22</p>
						</div>
					</a>
				</li>
		</ul>
		<div class="title">
			电子
		</div>
		<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media  lisize">
					<a href="#" class="mui-navigate-right detailss">
						<img class=" mui-pull-left" src="images/diannao.png">
						<div class="mui-media-body">
							<h6> 电脑</h6>
							<p class="mui-ellipsis"><span class="mui-icon iconfont icon-jine muiicon">6888</span></p>
							<p class="mui-ellipsis">库存：22</p>
						</div>
					</a>
				</li>
		</ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="js/iconfont.js"></script>
		<script type="text/javascript">
			mui.init();
			(function($, doc) {
			$.init();
			$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'dz',
						text: '电子'
					}, {
						value: 'sm',
						text: '数码'
					}, {
						value: 'sp',
						text: '食品'
					}, {
						value: 'yp',
						text: '药品'
					}, {
						value: 'rp',
						text: '用品'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var showUsertxt=doc.getElementById('showUsertxt');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							showUsertxt.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
				})(mui, document);
		</script>
	</body>
	<script type="text/javascript">
		document.getElementById('details').addEventListener('tap', function() {
		  		//打开关于页面
		  		
		  		mui.openWindow({
		    		url: 'details.html', 
		    		id:'details'
		  		});
		});
		
	</script>
</html>